<script setup lang="ts">
import { ref } from 'vue';
import Footer from '../components/Footer.vue';



interface Video {
  title: string;
  src: string;
  thumbnail: string;
}

const videos = ref<Video[]>([
  { title: '产品展示1', src: 'https://img1.hijs.cc/xubai/intro.mp4', thumbnail: 'https://img1.hijs.cc/xubai/videos/intro.jpg' },
  { title: '产品展示2', src: 'https://img1.hijs.cc/xubai/videos/intro2.mp4', thumbnail: 'https://img1.hijs.cc/xubai/videos/intro2.jpg' },
  { title: '工厂实拍1', src: 'https://img1.hijs.cc/xubai/videos/intro3.mp4', thumbnail: 'https://img1.hijs.cc/xubai/videos/intro3.jpg' },
  { title: '工厂实拍2', src: 'https://img1.hijs.cc/xubai/videos/intro4.mp4', thumbnail: 'https://img1.hijs.cc/xubai/videos/intro4.jpg' },
  { title: '生产流程1', src: 'https://img1.hijs.cc/xubai/videos/intro5.mp4', thumbnail: 'https://img1.hijs.cc/xubai/videos/intro5.jpg' },
  { title: '生产流程2', src: 'https://img1.hijs.cc/xubai/videos/intro6.mp4', thumbnail: 'https://img1.hijs.cc/xubai/videos/intro6.jpg' }
]);

const videoLoaded = ref<Record<string, boolean>>({});

const currentVideo = ref<Video | null>(null);

const openVideoModal = (video: Video) => {
  currentVideo.value = video;
  videoLoaded.value[video.src] = true;
};



</script>

<template>
  <div class="home">
    <section class="banner">
      <div class="container">
        <img loading="lazy" src="https://img1.hijs.cc/xubai/images/banner/index.jpg" alt="公司banner" class="img-fluid">
      </div>
    </section>
    <section class="product-carousel">
      <div class="container">
        <h2 class="text-center mb-4">产品展示</h2>
        <div id="productCarousel" class="carousel slide" data-bs-ride="carousel"
      >
          <div class="carousel-inner">
            <div class="carousel-item active">
              <div class="d-flex justify-content-center">
                <img loading="lazy" src="https://img1.hijs.cc/xubai/images/show/4.jpg" class="prev-item" alt="产品4">
                <img loading="lazy" src="https://img1.hijs.cc/xubai/images/show/1.jpg" class="current-item" alt="产品1">
                <img loading="lazy" src="https://img1.hijs.cc/xubai/images/show/2.jpg" class="next-item" alt="产品2">
              </div>
            </div>
            <div class="carousel-item">
              <div class="d-flex justify-content-center">
                <img loading="lazy" src="https://img1.hijs.cc/xubai/images/show/1.jpg" class="prev-item" alt="产品1">
                <img loading="lazy" src="https://img1.hijs.cc/xubai/images/show/2.jpg" class="current-item" alt="产品2">
                <img loading="lazy" src="https://img1.hijs.cc/xubai/images/show/3.jpg" class="next-item" alt="产品3">
              </div>
            </div>
            <div class="carousel-item">
              <div class="d-flex justify-content-center">
                <img loading="lazy" src="https://img1.hijs.cc/xubai/images/show/2.jpg" class="prev-item" alt="产品2">
                <img loading="lazy" src="https://img1.hijs.cc/xubai/images/show/3.jpg" class="current-item" alt="产品3">
                <img loading="lazy" src="https://img1.hijs.cc/xubai/images/show/4.jpg" class="next-item" alt="产品4">
              </div>
            </div>
            <div class="carousel-item">
              <div class="d-flex justify-content-center">
                <img loading="lazy" src="https://img1.hijs.cc/xubai/images/show/3.jpg" class="prev-item" alt="产品3">
                <img loading="lazy" src="https://img1.hijs.cc/xubai/images/show/4.jpg" class="current-item" alt="产品4">
                <img loading="lazy" src="https://img1.hijs.cc/xubai/images/show/5.jpg" class="next-item" alt="产品5">
              </div>
            </div>
            <div class="carousel-item">
              <div class="d-flex justify-content-center">
                <img loading="lazy" src="https://img1.hijs.cc/xubai/images/show/4.jpg" class="prev-item" alt="产品4">
                <img loading="lazy" src="https://img1.hijs.cc/xubai/images/show/5.jpg" class="current-item" alt="产品5">
                <img loading="lazy" src="https://img1.hijs.cc/xubai/images/show/1.jpg" class="next-item" alt="产品1">
              </div>
            </div>
          </div>
          <button class="carousel-control-prev" type="button" data-bs-target="#productCarousel" data-bs-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Previous</span>
          </button>
          <button class="carousel-control-next" type="button" data-bs-target="#productCarousel" data-bs-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
            <span class="visually-hidden">Next</span>
          </button>
        </div>
      </div>
    </section>

    <section class="video-section">
      <div class="container">
        <h2 class="text-center mb-4">公司视频介绍</h2>
        <div class="video-grid">
          <div class="video-item" v-for="(video, index) in videos" :key="index" @click="openVideoModal(video)">
            <img :src="video.thumbnail" alt="视频缩略图" class="video-thumbnail" />
            <div class="play-icon">
              <svg viewBox="0 0 24 24" width="48" height="48">
                <path fill="white" d="M8 5v14l11-7z"/>
              </svg>
            </div>
            <h3 class="video-title">{{ video.title }}</h3>
          </div>
        </div>
      </div>

      <div class="modal" v-if="currentVideo" @click.self="currentVideo = null">
        <div class="modal-content">
          <video v-if="videoLoaded[currentVideo.src]" controls autoplay>
            <source :src="currentVideo.src" type="video/mp4">
            您的浏览器不支持视频播放
          </video>
          <div v-else class="loading-placeholder">
            <div class="spinner-border text-light" role="status">
              <span class="visually-hidden">加载中...</span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="features">
      <div class="container">
        <div class="row">
          <div class="col-md-4">
            <div class="feature-box">
              <img loading="lazy" src="https://img1.hijs.cc/xubai/images/a1.jpg" alt="优质产品">
              <h3>优质产品</h3>
              <p>采用先进工艺，确保产品质量</p>
            </div>
          </div>
          <div class="col-md-4">
            <div class="feature-box">
              <img loading="lazy" src="https://img1.hijs.cc/xubai/images/a2.jpg" alt="专业服务">
              <h3>专业服务</h3>
              <p>提供全方位的技术支持和售后服务</p>
            </div>
          </div>
          <div class="col-md-4">
            <div class="feature-box">
              <img loading="lazy" src="https://img1.hijs.cc/xubai/images/a3.jpg" alt="创新研发">
              <h3>创新研发</h3>
              <p>持续创新，引领行业发展</p>
            </div>
          </div>
        </div>
      </div>
    </section>

    <section class="about-preview">
      <div class="container">
        <div class="row align-items-center">
          <div class="col-md-6">
            <img loading="lazy" src="https://img1.hijs.cc/xubai/images/factory.jpg" alt="工厂图片" class="img-fluid">
          </div>
          <div class="col-md-6">
            <h2>关于我们</h2>
            <p>沧县旭佰塑料制品厂是一家专业从事塑料制品生产和销售的企业，主营塑料食品罐、广口瓶、塑料喷瓶、兽药农药瓶等塑料制品的生产和定制销售。</p>
            <router-link to="/about" class="btn btn-primary">了解更多</router-link>
          </div>
        </div>
      </div>
    </section>

    <Footer style="margin-top: 60px" />
  </div>
</template>

<style scoped>
.product-carousel {
  padding: 60px 0;
}

.carousel {
  max-width: 1200px;
  margin: 0 auto;
}

.carousel-item img {
  max-height: 500px;
  object-fit: contain;
}

.current-item {
  width: 50%;
  z-index: 1;
}

.prev-item {
  width: 25%;
  opacity: 0.7;
  filter: blur(1px);
  z-index: 0;
  position: relative;
}

.prev-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.next-item {
  width: 25%;
  opacity: 0.7;
  filter: blur(1px);
  z-index: 0;
  position: relative;
}

.next-item::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}

.carousel-item {
  transition: transform 0.2s ease-in-out;
}

.carousel-control-prev-icon,
.carousel-control-next-icon {
  filter: brightness(0.5);
}

.video-section {
  background: #fff;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0 auto;
  max-width: 1200px;
}

.video-item {
  position: relative;
  box-shadow: 0 0 20px rgba(0,0,0,0.1);
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.3s ease;
  height: 300px;
}

.video-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.video-item:hover .play-icon {
  opacity: 1;
}

.video-item:hover {
  transform: translateY(-5px);
}

.video-title {
  text-align: center;
  padding: 10px;
  margin: 0;
  font-size: 16px;
  color: black;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.8);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

.modal-content {
  width: 80%;
  max-width: 800px;
  background: transparent;
  border: none;
}

.loading-placeholder {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 400px;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
}

.modal video {
  width: 100%;
  border-radius: 8px;
}

.features {
  padding: 60px 0;
  background: #f8f9fa;
}

.feature-box {
  text-align: center;
  padding: 20px;
}

.feature-box img {
  width: 100%;
  height: auto;
  margin-bottom: 20px;
}

.about-preview {
  padding: 60px 0;
}

.about-preview h2 {
  margin-bottom: 20px;
  margin-top: 20px;
}

.about-preview p {
  margin-bottom: 30px;
}
.banner {
  padding: 60px 0;
  background: #f8f9fa;
  margin-top: 60px;
}

@media (max-width: 768px) {
  .banner {
    margin-top: 40px;
    padding-bottom: 5px;
  }
}
</style>
